<template>
	<view class="uni-header pc">
		<!-- #ifdef H5 -->
		<view class="inner-top">
			<view class="top">
				<view class="left">
					<navigator class="link" url="/pages/index/index" open-type="switchTab">首页</navigator>
					<navigator v-if="!hasLogin" class="link" url="/pages/public/login">[请登录]</navigator>
					<navigator v-if="!hasLogin" class="link" url="/pages/public/register">[免费注册]</navigator>
					<view v-if="hasLogin">{{(userInfo.nickName || '用户' + userInfo.id)}} 欢迎</view>
				</view>
				<view class="right">
					<navigator class="link" url="/pages/public/login">
						<image src="/static/h5/icon02.png" mode="scaleToFill"></image>
						<view v-if="userInfo.userType != 1">我是买家</view>
						<view v-else>我是卖家</view>
					</navigator>

					<navigator class="link" url="/pages/cart/cart" open-type="switchTab">
						<image src="/static/h5/icon03.png" mode="scaleToFill"></image>
						购物车
					</navigator>
					<view class="link xcx">
						<image src="/static/h5/icon04.png" mode="scaleToFill"></image>
						扫码打开小程序
						<image class="xcx-img" src="/static/h5/xcx.jpg" mode="scaleToFill"></image>
					</view>

				</view>
			</view>
		</view>
		<view class="inner-box">
			<view class="mid">
				<view class="logo">
					<navigator class="link" url="/pages/index/index" open-type="switchTab">
						<image src="/static/h5/logo.png" mode="scaleToFill"></image>
					</navigator>
				</view>
				<view class="search-box">
					<view class="type-box">
						<text class="type" :class="type == 0 ? 'active' : ''" @click="typeChange(0)">产品</text>
						<text class="type" :class="type == 1 ? 'active' : ''" @click="typeChange(1)">店铺</text>
					</view>
					<view class="search">
						<input type="text" placeholder="请输入搜索关键词" v-model="keyword" @confirm="doSearch()" />
						<view class="search-btn" @click="doSearch()">搜索</view>
					</view>
					<view class="keyword"><text @click="doSearch('荏平信发')">荏平信发 |</text></view>
				</view>

				<navigator class="cart-btn" url="/pages/cart/cart" open-type="switchTab">
					<image src="/static/h5/icon01.png" mode="scaleToFill"></image>
					我的购物车
				</navigator>
			</view>
		</view>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				xcxShow: false,
				keyword: '',
				type: '0'
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		methods: {
			typeChange(e) {
				this.type = e
			},
			//执行搜索
			doSearch(e) {
				const key = e ? e : this.keyword
				if (this.type == 0) {
					uni.navigateTo({
						url: `/pages/product/list?keywords=${key}`
					})
				} else {
					uni.navigateTo({
						url: `/pages/shop/list?keywords=${key}`
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	/* #ifdef H5 */
	@media screen and (min-width: 750px) {
		.uni-header {
			position: relative;
			z-index: 998;

			.inner-top {
				background-color: $base-color-bg;
			}

			.top {
				display: flex;
				justify-content: space-between;
				margin: 0 auto;
				max-width: $base-width-pc;
				height: 50px;
				font-size: 14px;
				line-height: 50px;

				.link {
					display: flex;
					margin-right: 5px;
					color: #0251f4;
					font-size: 14px;
					text-decoration: none;
					cursor: pointer;

					image {
						display: block;
						width: 50px;
						height: 50px;
					}

					&:hover {
						text-decoration: underline;
					}
				}

				.left,
				.right {
					display: flex;
					position: relative;
				}

				.left .link:first-child {
					color: #010101;
				}

				.left .link:last-child {
					color: #999;
				}
				
				.right .xcx-img {
					display: none;
					position: absolute;
					right: 0;
					top: 120%;
					z-index: 10;
					width: 200px;
					height: 200px;
				}
				
				.right .xcx:hover .xcx-img {
					display: block;
				}

				.right .link {
					margin-left: 30px;
					margin-right: 0;
					color: #010101;
				}
			}

			.inner-box {
				background-color: #fff;
			}

			.mid {
				display: flex;
				justify-content: space-between;
				margin: 0 auto;
				padding: 15px 0;
				max-width: $base-width-pc;

				.logo {
					image {
						display: block;
						width: 130px;
						height: 130px;
					}
				}

				.search-box {
					display: flex;
					flex-direction: column;
					justify-content: center;

					.search {
						display: flex;

						.search-btn {
							width: 100px;
							height: 50px;
							color: #fff;
							line-height: 46px;
							background-color: $base-color-pc;
							text-align: center;
							cursor: pointer;
							border: 2px solid $base-color-pc;
						}
					}

					.type-box {
						display: flex;
					}

					.type {
						display: block;
						width: 60px;
						height: 34px;
						color: #010101;
						line-height: 30px;
						cursor: pointer;
						text-align: center;
						background-color: #fff;
						border: 2px solid #fff;

						&.active {
							color: #fff;
							background-color: $base-color-pc;
							border: 2px solid $base-color-pc;
						}
					}

					input {
						width: 636px;
						padding: 0 16px;
						height: 50px;
						line-height: 46px;
						border: 2px solid $base-color-pc;
					}
				}

				.keyword {
					margin-top: 14px;
					color: #999;
					font-size: 14px;
					line-height: 20px;

					text {
						cursor: pointer;
					}
				}

				.cart-btn {
					display: flex;
					justify-content: center;
					align-self: center;
					width: 160px;
					height: 50px;
					color: $base-color-pc;
					line-height: 46px;
					cursor: pointer;
					background-color: #fff;
					border: 2px solid $base-color-pc;

					image {
						margin: -2px;
						width: 50px;
						height: 50px;
					}
				}
			}
		}
	}

	/* #endif */
</style>
